import React from "react";
import ReactDOM from "react-dom/client";
import {
  HashRouter as Router,
  Switch,
  Link,
  Redirect,
  useHistory,
  useLocation,
  useRouteMatch,
  useParams,
  Route,
} from "./react-router-dom";

function lazy(load) {
  return class extends React.Component {
    state = { trueComponent: null };
    componentDidMount() {
      load().then((result) => {
        this.setState({ trueComponent: result.default || result });
      });
    }
    render() {
      let { trueComponent: LoadComponent } = this.state;
      return LoadComponent ? <LoadComponent {...this.props} /> : null;
    }
  };
}

function SuspenseHome() {
  return (
    <React.Suspense fallback={<div>loading</div>}>
      <LazyHome />
    </React.Suspense>
  );
}

let LazyHome = lazy(() =>
  import(/* webpackChunkName:"Home" */ "./components/Home")
);
let LazyProfile = lazy(() =>
  import(/* webpackChunkName:"Profile" */ "./components/Profile")
);
function SuspenseProfile() {
  return (
    <React.Suspense fallback={<div>loading</div>}>
      <LazyProfile />
    </React.Suspense>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>

          <li>
            <Link to="/profile">个人中心</Link>
          </li>
        </ul>
      </div>
      <Route path="/" component={SuspenseHome} />
      <Route path="/profile" component={SuspenseProfile} />
    </Router>
  </React.StrictMode>
);
